<template>
	<view class="login-container">
		<view class="login-card">
			<view class="login-title">用户登陆</view>

			<view class="form-group">
				<input type="text" class="form-input" placeholder="请输入用户名"
					:class="{ 'has-error': errorMsg.username }" v-model="formData.username" />
				<view class="error-message" v-if="errorMsg.username">{{ errorMsg.username }}</view>
			</view>

			<view class="form-group">
				<view class="password-input-wrapper">
					<input :type="passwordVisible ? 'text' : 'password'" class="form-input" placeholder="请输入密码"
						:class="{ 'has-error': errorMsg.password }" v-model="formData.password" />
					<view class="password-toggle" @click="togglePasswordVisibility">
						<text class="iconfont">{{ passwordVisible ? '&#xe646;' : '&#xe645;' }}</text>
					</view>
				</view>
				<view class="error-message" v-if="errorMsg.password">{{ errorMsg.password }}</view>
			</view>

			<button class="login-button" :disabled="isLoading || !isFormValid" @click="handleLogin">
				{{ isLoading ? '登录中...' : '登录' }}
			</button>

			<view class="register-link" @tap="goToRegister">
				还没有账号？<text class="register-text">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				passwordVisible: false,
				errorMsg: {
					username: '',
					password: ''
				},
				isLoading: false
			}
		},
		computed: {
			isFormValid() {
				return this.formData.username && this.formData.password
			}
		},
		methods: {
			togglePasswordVisibility() {
				this.passwordVisible = !this.passwordVisible
			},
			validateLoginForm() {
				this.errorMsg = {
					username: this.formData.username ? '' : '请输入用户名',
					password: this.formData.password ? '' : '请输入密码'
				}
				return Object.values(this.errorMsg).every(msg => !msg)
			},
			async handleLogin() {
			  if (!this.validateLoginForm()) return // 表单校验
		
			  this.isLoading = true // 显示加载状态
			  this.errorMsg = {} // 清空错误信息
		
			  try {
			    // 调用登录接口
			    const result = await uniCloud.callFunction({
			      name: 'user-auth',
			      data: {
			        action: 'login',
			        username: this.formData.username.trim(),
			        password: this.formData.password
			      }
			    })
		
			    if (result.result.code === 200) {
			      // 登录成功
			      uni.showToast({
			        title: '登录成功',
			        icon: 'success',
			        duration: 1500
			      })
			      
			      // 存储用户信息
			      uni.setStorageSync('token', result.result.token)
			      uni.setStorageSync('userInfo', result.result.userInfo)
			      
			      // 跳转到首页
			      setTimeout(() => {
			        uni.switchTab({ url: '/pages/index/index' })
			      }, 1500)
			    } else {
			      uni.showToast({
			        title: result.result.msg || '登录失败，请检查用户名或密码',
			        icon: 'none',
			        duration: 2000
			      })
			    }
			  } catch (error) {
			    console.error('登录请求失败:', error)
			    uni.showToast({
			      title: '网络请求失败，请重试',
			      icon: 'none'
			    })
			  } finally {
			    this.isLoading = false // 隐藏加载状态
			  }
			},
			goToRegister() {
				// 跳转到注册页面
				uni.navigateTo({ url: '/pages/register/register' })
			}
		}
	}
</script>

<style>
	/* 登录页面样式 */
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		padding: 0 1rem;
	}

	.login-card {
		width: 100%;
		max-width: 320px;
		padding: 1.5rem;
		background-color: #ffffff;
		border-radius: 0.5rem;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	.login-title {
		margin-bottom: 1.5rem;
		font-size: 1.25rem;
		font-weight: 600;
		text-align: center;
		color: #1f2937;
	}

	.form-group {
		margin-bottom: 1rem;
	}

	.form-input {
		width: 100%;
		height: 2.5rem;
		padding: 0 0.75rem;
		border: 1px solid #e5e7eb;
		border-radius: 0.375rem;
		background-color: #ffffff;
		font-size: 1rem;
		color: #1f2937;
		transition: all 0.2s ease;
		box-sizing: border-box;
	}

	.form-input:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
	}

	.form-input.has-error {
		border-color: #ef4444;
	}

	.password-input-wrapper {
		position: relative;
	}

	.password-toggle {
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		color: #9ca3af;
		cursor: pointer;
	}

	.error-message {
		margin-top: 0.25rem;
		font-size: 0.875rem;
		color: #ef4444;
	}

	.login-button {
		width: 100%;
		height: 2.5rem;
		margin-top: 0.5rem;
		background-color: #3b82f6;
		border-radius: 0.375rem;
		color: #ffffff;
		font-size: 1rem;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		border: none;
	}

	.login-button:disabled {
		background-color: #94a3b8;
		cursor: not-allowed;
	}

	.login-button:not(:disabled):hover {
		background-color: #2563eb;
	}

	.login-button:not(:disabled):active {
		background-color: #1d4ed8;
	}

	.register-link {
		margin-top: 1rem;
		text-align: center;
		font-size: 0.875rem;
		color: #6b7280;
	}

	.register-text {
		color: #3b82f6;
		text-decoration: underline;
		cursor: pointer;
	}
</style>